<template>
  <div>
    <el-dialog :title="title" v-model="editVisible" width="500px" top="5vh" :close-on-click-modal="false"
      @close="handleclose">
      <el-form>
        <el-form-item :required="true">
          <div>
            <div>{{ paydetail.receiverType }}</div>
            <div>收款主体：{{ paydetail.receiverName }}</div>
            <div>收款银行：{{ paydetail.receiverType }}</div>
            <div>收款账号：{{ paydetail.receiverAccount }}</div>
            <div>支行名称：{{ paydetail.receiverAddress }}</div>
            <span class="width160">*上传{{ title }}凭证（截图）：</span>
            <div class="displayflex">
              <div v-if="viewimageUrl">
                <!--  支持图片放大 -->
                <el-image class="up_img" :src="viewimageUrl" :preview-src-list="[viewimageUrl]" />
                <!-- <img width="100%" :src="item" alt="" v-for="(item, index) in imageUrls"   :preview-src-list="imageUrls"/> -->
                <i class="el-icon-delete" @click="handledeleteImg"></i>
              </div>
              <el-upload v-if="!viewimageUrl" :limit="1" :action="uploaddata.url + ''" :data="uploaddata.data"
                :headers="uploaddata.headers" name="file" accept=".png,.jpg,.gif" list-type="picture-card"
                @click="handleUpload" :on-success="Uploadsuccess">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="btn_b">
              <el-button @click="handleclose" class="icon-search1">取消</el-button>
              <el-button type="primary" class="icon-search" @click="handleSaveEdit">确定</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const paydetail = ref(context.attrs.paydetail);
    console.log(paydetail.value)
    const title = ref(context.attrs.title);
    const router = useRouter();
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    //图片上传
    const uploaddata = ref({});
    const handleUpload = () => {
      uploaddata.value = {
        url: api.getUrl() + "external/file/upload", //接口名称
        data: {
          upType: "fc",
          sort: Math.floor(Math.random() * 20) + 1,
        },
        headers: {
          token: localStorage.getItem("token"),
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      };
    };
    const imageUrl = ref("");
    const viewimageUrl = ref(null);
    const Uploadsuccess = (response) => {
      if (response.data) {
        imageUrl.value = response.data.url;
        viewimageUrl.value = response.data.tempUrl;
      }
    };
    const handleSaveEdit = () => {
      context.emit("handleSaveEdit", imageUrl.value);
    };
    const handledeleteImg = () => {
      imageUrl.value = null;
      viewimageUrl.value = null;
    };
    return {
      imageUrl,
      viewimageUrl,
      paydetail,
      router,
      radioValue,
      editVisible,
      uploaddata,
      title,
      handledeleteImg,
      handleclose,
      handleSaveEdit,
      handleUpload,
      Uploadsuccess,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/common.less";

.btn_b {
  margin-top: 30px;
}

.el-icon-delete {
  font-size: 24px;
  margin-left: 20px;
  position: relative;
  bottom: 140px;
  z-index: 99999;
  right: 50px;
}

.up_img {
  height: 150px;
  width: 150;
  margin-right: 40px;
  position: relative;
}
</style>
